<template>
  <div id="my-collapse-item">
    <div class="my-collapse-wrapper">
      <div class="my-collapse-i f1" v-model="title">
        <h4>
          {{title}}
        </h4>
      </div>
      <!--<transition name="fold">-->
      <div class="my-collapse-i f2" :class="{isShow:(isOpen)}">
        <div class="my-collapse-list">
          <slot></slot>
        </div>
      </div>
      <!--</transition>-->
      <div class="my-collapse-i f3">
        <span type="button" @click="isOpen=!(isOpen)">
          <i class="fa" :class="isOpen?'fa-angle-up':'fa-angle-down'" aria-hidden="true"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'my-collapse-item',
    data () {
      return {
        isOpen: this.open,
        visible: false,
        currentType: this.type
      }
    },
    watch: {
      subOpen (n, o) {
        if (n !== o) {
          this.isOpen = n
        }
      }
    },
    props: {
      title: String,
      open: Boolean,
      subOpen: Boolean,
      type: String
    },
    methods: {},
    mounted () {
    }
  }
</script>

<style lang="scss" scoped>
  #my-collapse-item {
    border-bottom: 1px solid #e5e5e5;
    .my-collapse-wrapper {
      /*min-height: 1.4666667rem;*/
      /*height: 1.4666667rem;*/
      overflow: hidden;
      .my-collapse-i {
        float: left;
        .my-collapse-list {
          overflow: hidden;
          /*height: auto;*/
          /*min-height: 1.4666667rem;*/
        }
      }
      .my-collapse-i.f1 {
        width: 20%;
        /*margin-top: 0.4rem;*/
        /*margin-top: 0.5333333rem;*/
        /*height: 0.9333333rem;*/
        line-height: 0.96rem;
        height: 0.96rem;
      }
      .my-collapse-i.f2 {
        width: 60%;
        /*margin-top: 0.2666667rem;*/
        /*min-height: 0.9333333rem;*/
        height: 0.96rem;
      }
      .my-collapse-i.f2.isShow {
        height: auto;
        transition-timing-function: ease-in-out;
        /*transform: translate3d(0, 60px, 0);*/
        transition-delay: 3s;
      }
      .my-collapse-i.f3 {
        width: 20%;
        margin-top: 0.4rem;
        /*margin-top: 0.5333333rem;*/
      }
    }
  }
</style>
